<%--
  Created by IntelliJ IDEA.
  User: 20456
  Date: 2021/11/24
  Time: 14:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page isELIgnored="false" %>
<% String contextPath = request.getContextPath(); %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>前台界面</title>
    <link rel="stylesheet" type="text/css" href="<%=contextPath%>/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="<%=contextPath%>/css/car.css"/>
    <script src="<%=contextPath%>/js/jquery-3.6.0.min.js"></script>
    <script src="<%=contextPath%>/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>

<div style="color: red;padding-left: 266px">
    <span style="color: red;">支付倒计时：</span>
             <span id="_d">00</span>
             <span id="_h">00</span>
             <span id="_m">00</span>
             <span id="_s">00</span>
 </div>
<!--商品详情展示开始-->
<div class="info warp">

    <ul>

        <%--<li class="info_2"> <img src="${order.picture}" width="80px" height="80px"/> </li>--%>

        <li class="info_3"><a>【待支付】${order.ordername}</a></li>
        <%--<li class="info_4"><a>特色：${order.feature}</a> </li>--%>
        <%--<li class="info_6">--%>

        <%--<input type="text" name=""  value="" readonly/>--%>

        <%--</li>--%>
        <li class="info_7">￥${order.price}.00</li>
        <%--<li>--%>
        <%--<a>删除</a><br />--%>
        <%--<a>已到我的关注</a>--%>
        <%--</li>--%>
    </ul>

</div>


<div class="balance warp">
    <%--<ul class="balance_ul1">--%>
    <%--<li><input type="checkbox">全选</li>--%>
    <%--<li>删除选中商品</li>--%>
    <%--<li>移到我的关注</li>--%>
    <%--<li>清除下柜商品</li>--%>
    <%--</ul>--%>

    <ul class="balance_ul2">

        <li style="padding-right: 20px;">总价<span>￥${order.price}</span></li>
        <li class="butt1"><a href="http://localhost/front/cancelorder?id=${order.id}" target="_self">取消订单</a></li>
        <li class="butt">确认订单</li>
    </ul>
</div>
<script>
    $(function () {
        $(".butt").click(function () {
                window.location.href="http://localhost/front/alipay?id=${order.id}";
        });
    });

</script>



<script type="text/javascript">
    $(function () {
        function countTime() {

            //获取当前时间
            var date = new Date();
            var now = date.getTime();
            //设置截止时间
            var strTime = "${order.closetime}";

            var str = timeFormat(strTime);
            var endDate = new Date(str);
            var end = endDate.getTime()
            //时间差
            var leftTime = end - now;
            //定义变量 d,h,m,s保存倒计时的时间
            var d, h, m, s;
            if (leftTime >= 0) {
                d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
                h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
                m = Math.floor(leftTime / 1000 / 60 % 60);
                s = Math.floor(leftTime / 1000 % 60);
            }
            //将倒计时赋值到div中
            document.getElementById("_d").innerHTML = d + "天";
            document.getElementById("_h").innerHTML = h + "时";
            document.getElementById("_m").innerHTML = m + "分";
            document.getElementById("_s").innerHTML = s + "秒";
            //递归每秒调用countTime方法，显示动态时间效果
            // setTimeout(countTime(), 1000)
        }
        countTime();

        setInterval(countTime, 1000);

        function timeFormat(time){
            var d = new Date(time.substr(0, 19));//加入substr(0, 19)处理兼容ios报错NAN
            var year = d.getFullYear();       //年
            var month = d.getMonth() + 1;     //月
            var day = d.getDate();            //日

            var hh = d.getHours();            //时
            var mm = d.getMinutes();          //分
            var ss = d.getSeconds();           //秒

            var clock = year + "-";

            if (month < 10)
                clock += "0";

            clock += month + "-";

            if (day < 10)
                clock += "0";

            clock += day + " ";

            if (hh < 10)
                clock += "0";

            clock += hh + ":";
            if (mm < 10) clock += '0';
            clock += mm + ":";

            if (ss < 10) clock += '0';
            clock += ss;
            return (clock);
        }
    });

</script>
</body>
</html>
